<template>
  <div>
    <ul>
      <li v-for="(value, index) of goodsList" :key="index">
        {{ value.name }}
        单价：{{ value.price }}
        <Counter
          :num="value.num"
          :index="index"
          @add="add"
          @sub="sub"
          @changeNum="changeNum"
        ></Counter>
      </li>
    </ul>
    <p>总价为：{{ talPrice }}</p>
  </div>
</template>
<script>
import Counter from "./Counter";
import store from "../../store.js";
export default {
  components: {
    Counter,
  },
  data() {
    return {
      goodsList: store.state.goodsList,
    };
  },
  computed: {
    talPrice() {
      let result = 0;
      for (let i = 0; i < this.goodsList.length; i++) {
        result += this.goodsList[i].num * this.goodsList[i].price;
      }

      return result.toFixed(2);
    },
  },
  methods: {
    add(index, num) {
      this.goodsList[index].num = num;
      // this.totalPrice =
      //   (this.totalPrice * 10 + this.goodsList[index].dj * 10) / 10;
    },
    sub(index, num) {
      if (this.goodsList[index].num > 0) {
        this.goodsList[index].num = num;
        // this.totalPrice =
        //   (this.totalPrice * 10 - this.goodsList[index].dj * 10) / 10;
      }
    },
    changeNum(index, num) {
      this.goodsList[index].num = num;
      // console.log(index, num, this.goodsList);
      // this.totalPrice =
      //   (this.totalPrice * 10 - this.goodsList[index].dj * 10) / 10;
    },
  },
};
</script>
